<template>
	<view class="container">
		<swiper autoplay circular indicator-dots interval="3000" duration="1000">
			<swiper-item v-for="item in swiperData" :key="item.goods_id">
				<image class="swiper-img" :src="item.images"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "banner",
		data() {
			return {
				swiperData: [],
			};
		},
		methods: {
			getSwiper() {
				this.$api.home.getBanners().then((data)=>{
					this.swiperData = data.result
				});
			},
		},
		created() {
			this.getSwiper();
		},

	}
</script>

<style>
	.container {
		padding: 20rpx;
		padding-bottom: 0;
	}

	.container swiper {
		width: 100%;
		height: 300rpx;
		margin-bottom: 20rpx;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.navList {
		display: flex;
		justify-content: space-evenly;
	}

	.nav-img {
		height: 135rpx;
		width: 130rpx;
	}
</style>
